<template>
  <div id="addexp">
    <van-nav-bar
      title="发布经验"
      left-text="取消"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- <button @click="addDate">11</button> -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="title"
        name="标题"
        label="标题："
        placeholder="标题"
        :rules="[{ required: true, message: '请填写标题' }]"
      />
      <van-field
        readonly
        clickable
        label="分类"
        name="type_id"
        :value="type.text"
        placeholder="选择分类"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-field name="uploader" label="主图">
        <template #input>
          <van-uploader
            v-model="uploader"
            name="img"
            :after-read="UploadImg"
            multiple
            :max-count="1"
          />
        </template>
      </van-field>
      <van-field
        v-model="content"
        name="content"
        rows="10"
        autosize
        label="发布经验"
        type="textarea"
        maxlength="500"
        placeholder="请输入个人经验"
        show-word-limit
      />

      <div style="margin: 16px">
        <van-button class="button" native-type="submit">发布</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";

export default {
  data() {
    return {
      updateTime:"",
      img: "",
      title: "",
      type: "",
      content: "",
      showPicker: false,
      columns: [
        { id: 1, text: "考研" },
        { id: 2, text: "考公" },
        { id: 3, text: "实习" },
        { id: 4, text: "英语" },
        { id: 5, text: "高数" },
      ],
      fileList: [],
      uploader: [],
    };
  },
  methods: {
  //  l addDate() {
      
  //   },
    UploadImg(file) {
      console.log(file);

      let formData = new FormData();
      formData.append("image", file.file);
      //继续使用上文的formData
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios
        .post("/api/qbs/api/upload.php", formData, config)
        .then((res) => {
          console.log(res);
          this.img = res.data.data.path;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit(values) {
      console.log("submit", values);

      // let user_id = localStorage.getItem("login_user_id");
      axios
        .get("/api/qbs/api/addexp.php", {
          params: {
            img: this.img,
            title: this.title,
            content: encodeURI(this.content),
            type_id: this.type.id,
            // UploadImg: this.Uploader,
            content: this.content,
            user_id: localStorage.getItem("login_user_id"),
            username: localStorage.getItem("login_username"),
            user_img: localStorage.getItem("login_user_img"),
            create_time:this.updateTime,
          },
        })
        .then((response) => {
          console.log(response);
          if (response.status == 200) {
            Toast.success("发布成功");
            this.users = response.data.data;
            let state = localStorage.getItem("login_user_state");
            console.log(state);
            if (state == 1) {
              this.$router.push("/myseniorProfile");
            } else {
              this.$router.push("/myuserProfile");
            }
          } else {
            Toast.fail("发布失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onConfirm(value) {
      this.type = value;
      this.showPicker = false;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
  created() {
    // 打印当前时间
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const day = date.date > 10 ? date.date : "0" + date.date;
      this.updateTime = date.year + "-" + newmonth + "-" + day;
      
      

    let user_id = localStorage.getItem("login_user_id");
    // console.log(user_id);
    axios.get("/api/qbs/api/userInfo.php?id=" + user_id).then((response) => {
      console.log(response.data.data);
      this.userInfo = response.data.data;
      // console.log(item);
    });
    console.log("created");
  },
};
</script>

<style lang="scss" scoped>
#upload {
  p {
    position: absolute;
    left: 10px;
  }
}
.content {
  height: 300px;
  p {
    position: absolute;
    left: 8px;
  }
  textarea {
    height: 230px;
    width: 60%;
    position: absolute;
    right: 50px;
    top: 250px;
  }
}
.button {
  position: absolute;
  right: 20px;
  background-color: lightpink;
  border-radius: 20px;
}
>>> .van-nav-bar .van-icon {
  color: lightpink;
}
>>> .van-nav-bar__text {
  color: lightpink;
}
>>> .van-nav-bar__title.van-ellipsis {
  color: lightpink;
}
</style>